<template>
  <div class="goodlist">
    <div v-if="goodlist.length > 0">
      <v-header :title="this.$route.meta.title"></v-header>
      <van-swipe class="my-swipe" indicator-color="#000">
        <van-swipe-item v-for="(item, index) in goodlist[0].swiper" :key="index"
          ><img v-lazy="item.swipe" alt=""
        /></van-swipe-item>
      </van-swipe>
      <van-panel class="my-panel" title="商品信息">
        <div class="content">
          <p class="name">{{ goodlist[0].name }}</p>
          <p class="bright">
            <span>【{{ goodlist[0].bright }}】</span>
            {{ goodlist[0].title }}
          </p>
          <p class="price">￥{{ goodlist[0].price }}</p>
        </div>
      </van-panel>
      <p class="number">
        <span>购买数量:</span>
        <van-stepper v-model="value" />
      </p>
      <van-cell is-link @click="show = true">
        <template #title>
          <i class="iconfont icon-icon--"></i>
          <span>支持花呗分期</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <i class="iconfont icon-icon--"></i>
          <span>支持以旧换新</span></template
        >
      </van-cell>
      <van-action-sheet v-model="show" title="服务说明">
        <div class="content">
          <div>
            <p><i class="iconfont icon-icon--"></i> 支持花呗分期</p>
            <p class="p2">商品支持花呗分期</p>
          </div>
          <div>
            <p><i class="iconfont icon-icon--"></i> 可以使用换新鼓励金</p>
            <p class="p2">
              换新鼓励金通过参加以旧换新回收時机以后获<br />得，旧手机享受额外补贴。<span
                >现在换机</span
              >
            </p>
          </div>
          <van-button round type="info" @click="show = false">关闭</van-button>
        </div>
      </van-action-sheet>
      <van-tabs v-model="active" swipeable animated>
        <van-tab title="图片详情">
          <img
            v-for="(ii, index) in goodlist[0].Images"
            :key="index"
            v-lazy="ii.one"
            alt=""
          />
        </van-tab>
        <van-tab title="参数"></van-tab>
      </van-tabs>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :info="count"
          to="/meCart"
        />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addCart"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>
<script>
import header from "@/components/header/index.vue";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  // props: ["id",shop_id],
  computed: {
    ...mapGetters({
      count: "cart/getAllCount",
    }),
  },
  components: {
    "v-header": header,
  },
  data() {
    return {
      id: this.$route.query.id,
      shop_id: this.$route.query.shop_id,
      goodlist: [],
      value: 1,
      show: false,
      active: 0,
    };
  },
  methods: {
    async getGood() {
      // console.log(this.id);
      // console.log(this.shop_id);
      const res = await this.$http.getGood(this.id);
      // console.log(res.data.data);
      // console.log(res);
      // console.log(res.data.data[0]);
      // this.goodlist = res.data.data[0];
      let arr = [];
      res.data.data.forEach((item) => {
        if (item.id === Number(this.shop_id)) {
          arr.push(item);
        }
      });
      // console.log(index);
      this.goodlist = arr;
      // console.log(dd);
      // this.goodlist = res.data.data[this.shop_id];
      // console.log(res.data.data[this.shop_id]);
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },
    addCart() {
      let user = JSON.parse(sessionStorage.getItem("user") || "{}");
      // console.log(user);
      if (!user.name) {
        Dialog.confirm({
          title: "提示",
          message: "您还未登录，点击确定跳转至登录页面",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      }
      const goodslist = {
        id: this.id, //专区id
        shop_id: this.shop_id, //商品id
        flag: true, //是否选中
        img_url: this.goodlist[0].swiper[0].swipe, //  商品图片
        price: this.goodlist[0].price, //  商品价格
        count: this.value,
        name: this.goodlist[0].name,
      };
      // console.log(this.$store);
      // console.log(goodslist);
      this.$store.commit("cart/SET_CART", goodslist);
      this.value = 1;
    },
  },
  created() {
    this.getGood();
  },
};
</script>
<style lang="scss" scoped>
.goodlist {
  margin-top: 50px;
  background: #fff;
  margin-bottom: 50px;
}
.my-swipe {
  margin: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  .van-swipe-item {
    text-align: center;
    width: 100%;
    height: 260px;
    padding: 20px 0;
    img {
      // width: 100%;
      height: 100%;
    }
  }
}
.my-panel {
  margin: 0 10px 5px 10px;
  border: 1px solid #eee;
  .content {
    font-size: 12px;
    margin-left: 15px;
    .name {
      font-size: 16px;
    }
    .bright {
      span {
        color: red;
      }
    }
    .price {
      color: red;
      font-size: 22px;
    }
  }
}
.number {
  border: 1px solid #eee;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}
.number span {
  margin-right: 4px;
}
.van-cell {
  font-size: 12px;
  .iconfont {
    color: rgb(71, 98, 198);
    margin-right: 5px;
  }
}
.content {
  padding: 0 20px;
  font-size: 14px;
  .iconfont {
    color: rgb(87, 113, 207);
  }
  .p2 {
    margin-left: 18px;
  }
  .van-button {
    margin: 5px 0;
    width: 100%;
  }
}
.van-tab__pane {
  img {
    width: 100%;
    vertical-align: top;
  }
}
</style>
